<template>
  <div class="experiment-home">
    <el-container>
      <el-aside width="20%">
        <!-- 实验信息表单  -->
        <ExperimentInfo/>
        <!--统计数据-->
        <StatisticsData/>
      </el-aside>

      <el-main>
        <!-- 设定阶段数据表格 -->
        <StageSettings></StageSettings>
        <!-- 其他阶段设置列 -->
        <MeasuredStageData></MeasuredStageData>
      </el-main>

      <el-aside width="20%" >
        <!-- 实时数据表格 -->
        <TabsComponent></TabsComponent>
        <!-- 实验操作按钮 -->
        <ExperimentOperations></ExperimentOperations>
      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
// 导入所需组件
import ExperimentInfo from "@/components/LabA/ExperimentInfo.vue"
import ExperimentOperations from "@/components/LabA/ExperimentOperations.vue"
import StatisticsData from "@/components/LabA/StatisticsData.vue"
import StageSettings from "@/components/LabA/StageSettings.vue"
import MeasuredStageData from "@/components/LabA/MeasuredStageData.vue"
import TabsComponent from "@/components/LabA/TabsComponent.vue"


</script>

<style scoped>
.experiment-home {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}

.experiment-operations {
  margin-top: 20px;
}

/* 添加容器样式以确保正确的布局 */
.el-container {
  width: 100%;
}

.el-aside {
  background-color: #fff;
  padding: 10px;
}

.el-main {
  background-color: #fff;
  padding: 10px;
}
</style>